<template>
	<view>

		<view class="wfc mlr shadow-1 bb p-10 br-6" style="width: 90%;margin-top: 6vh;">
			<image show-menu-by-longpress :src="placardImg" class="br-6" style="width: 100%;" mode="widthFix"></image>
		</view>

		<view @click="saveAlbum" class="box-save wfc mlr mt-20" >
			<text>保存到相册</text>
		</view>



		<!-- 绘制海报 -->
		<l-painter v-if="isCanvasToTempFilePath" isCanvasToTempFilePath @success="painterSuccess" hidden
			css="width: 750rpx;">
			<l-painter-view
				css="width: 750rpx;height: 1200rpx;background-image: url('https://yjgs.jsonbug.com/test/shanghuibj.png');position: relative;">


				<!-- 商会logo -->
				<l-painter-image :src="$timer.ensureUrl(cardInfo.shLogo)"
					css="height: 180rpx;width: 180rpx;object-fit: cover;position: absolute;left: 50%;transform: translateX(-50%);top: 15%;" />
				<!-- end -->


				<!-- 商会名称 -->
				<l-painter-text :text="cardInfo.shName || '' "
					css="text-align: center;margin-left: 10rpx;width: 78%;line-clamp:2;position: absolute;font-size: 46rpx;color: #3A2521;font-weight: bold;left: 50%;transform: translateX(-50%);top:33%" />
				<!-- end -->

				<!-- 职位名称 -->
				<l-painter-text :text="cardInfo.zwName || '' "
					css="text-align: center;margin-left: 10rpx;width: 78%;line-clamp:2;position: absolute;font-size: 60rpx;color: #3A2521;font-weight: bold;left: 50%;transform: translateX(-50%);top:43%;" />
				<!-- end -->


				<!-- 分销码 -->
				<l-painter-image :src="$timer.ensureUrl(cardInfo.qrcode)"
					css="height: 200rpx;width: 200rpx;object-fit: cover;position: absolute;left: 50%;transform: translateX(-50%);top: 55%;" />
				<!-- end -->


				<!-- 公司名称 -->
				<l-painter-text :text="cardInfo.gsName || ''"
					css="position: absolute;font-size: 30rpx;color: #483531;left: 50%;transform: translateX(-50%);top:75%;font-weight: bold" />
				<!-- end -->

				<!-- 有效期 -->
				<l-painter-text v-if="cardInfo.time" :text="cardInfo.time"
					css="position: absolute;font-size: 20rpx;color: #483531;left: 50%;transform: translateX(-50%);top:79%;font-weight: bold" />
				<!-- end -->

			</l-painter-view>
		</l-painter>
		<!-- end -->

	</view>
</template>

<script>
	import {
		comDetail,
		comGetUserInfo
	} from '@/api/extend.js';
	import lPainter from '@/pages/extend/components/lime-painter/components/l-painter/l-painter.vue';
	import lPainterView from '@/pages/extend/components/lime-painter/components/l-painter-view/l-painter-view.vue';
	import lPainterText from '@/pages/extend/components/lime-painter/components/l-painter-text/l-painter-text.vue';
	import lPainterImage from '@/pages/extend/components/lime-painter/components/l-painter-image/l-painter-image.vue';
	export default {
		components: {
			lPainter,
			lPainterView,
			lPainterText,
			lPainterImage,
		},
		data() {
			return {
				cardInfo: {
					shName: '', // 商会名称
					zwName: '', // 职位名称
					shLogo: '', // 商会logo
					qrcode: '', // 二维码
					gsName: '', // 公司名称
					time: '' // 有效期
				},
				placardImg: '',
				isCanvasToTempFilePath: false,
				options: {},
				chamberObj: {}
			}
		},
		onLoad(options) {
			this.options = options
			this.comGetUserInfoFunc();
		},
		methods: {
			comGetUserInfoFunc() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				comGetUserInfo({
					com_id: this.options.cid
				}).then(res => {

					this.isCanvasToTempFilePath = true;

					uni.showLoading({
						title: '证书生成中...',
						mask: true
					});
					this.cardInfo.shName = res.data.com_name.split('').join(' ');
					this.cardInfo.shLogo = res.data.com_logo;
					this.cardInfo.zwName = res.data.positon.split('').join(' ');
					this.cardInfo.qrcode = res.data.qr_code
					this.cardInfo.gsName = res.data.company_name;
					if (res.data.vip_start_time && res.data.vip_end_time) {
						this.cardInfo.time =
							`有效期限：${this.$timer.formatTime(res.data.vip_start_time,'yyyy年mm月dd日')}至${this.$timer.formatTime(res.data.vip_end_time,'yyyy年mm月dd日')}`
					} else {
						this.cardInfo.time = null
					}

				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},

			painterSuccess(e) {
				this.placardImg = e;
				setTimeout(() => {
					uni.hideLoading();
				}, 300)

			},
			saveAlbum() {

				if (!this.placardImg) {
					uni.showToast({
						title: '等待证书生成...',
						icon: 'none'
					})
					return;
				}

				this.downloadBase64ImageToAlbum(this.placardImg);
			},
			downloadBase64ImageToAlbum(base64Data) {

				uni.showLoading({
					title: '正在保存中...',
					mask: true
				})
				// 提取 Base64 内容
				const base64Content = base64Data.split(',')[1];

				// 将 Base64 字符串转换为 ArrayBuffer
				const buffer = wx.base64ToArrayBuffer(base64Content);

				// 创建临时文件路径
				const tempFilePath = `${wx.env.USER_DATA_PATH}/temp_image1.png`;

				// 使用 wx.getFileSystemManager() 保存文件
				const fs = wx.getFileSystemManager();

				fs.writeFile({
					filePath: tempFilePath,
					data: buffer,
					encoding: 'binary',
					success: function() {
						// 保存到相册
						wx.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: function() {
								uni.hideLoading()
								wx.showToast({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: function(err) {
								uni.hideLoading();
								if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel')
							return; // 用户取消保存
								uni.showModal({
									content: '保存失败，请长按图片保存'
								})
							}
						});
					},
					fail: function(err) {
						uni.hideLoading()
						wx.showToast({
							title: '下载失败',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box-save:active {
		opacity: .5;
	}

	.box-save {
		margin-top: 20rpx;
		border-radius: 6rpx;
		text-align: center;
		line-height: 70rpx;
		width: 300rpx;
		height: 70rpx;
		background-color: #00009E;
		color: white;
	}
</style>